<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>到货确认 -- 配送记录统计</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet" />
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<button style="position: absolute; top: 5px;right: 20px;"
        class="btn btn-info" onclick="javascript:window.opener=null;window.open('','_self');window.close();">关闭</button>
<div class="container-fluid" id="app">
    <form class="form-inline" style="margin-top: 50px; margin-bottom: 5px;">
        <div class="form-group">
            <input id="lineInput" class="form-control input-sm" type="text"
                   placeholder="路线名称">
        </div>
        <div class="form-group">
            <input id="driverNameInput" class="form-control input-sm" type="text"
                   placeholder="配送员姓名">
        </div>
        <div class="form-group">
            <input id="beginOperatorTimeInput" class="form-control input-sm"   type="text" placeholder="请选择开始时间">
        </div>
        <div class="form-group">
            <input id="endOperatorTimeInput" class="form-control input-sm"   type="text" placeholder="请选择结束时间">
        </div>
        <button type="button" class="btn btn-sm btn-success" @click="getOrder(1,'1')">查询</button>
  <%--      <button type="button" title="根据查询条件导出所有记录" @click="exportExcel();"
                class="btn btn-sm btn-info">导出Excel
        </button>--%>

    </form>
    <div class="row" style="background-color: #0c3166;margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-12" style="margin-top: 6px;position: relative">
            <strong style="font-size: 18px;color: #f9f9f9;">配送记录</strong>
        </div>

    </div>
    <div class="table-responsive" id="tableContainer" style="font-size: 18px;">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color:#eee;">
            <tr>
                <th>配货时间</th>
                <th>配送路线</th>
                <th>送货数量</th>
                <th>送货金额</th>
                <th>电子结算</th>
                <th>退货数量</th>
                <th>退货金额</th>
                <th>实送数量</th>
                <th>实收金额</th>
                <th>工行pos机</th>
                <th>建行pos机</th>
                <th>农行pos机</th>
                <th>配送人员</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="order in orderList">
                <td :class="{h5:order.OPERATOR_TIME == '查询合计:'}">{{order.OPERATOR_TIME}}</td>
                <td>{{order.DELIVER_LINE_NAME}}</td>
                <td>{{order.QUANTITY1}}</td>
                <td>{{order.AMT1}}</td>
                <td>{{order.AMT2}}</td>
                <td>{{order.QUANTITY3}}</td>
                <td>{{order.AMT3}}</td>
                <td>{{order.QUANTITY4}}</td>
                <td>{{order.AMT4}}</td>
                <td>{{order.AMT5}}</td>
                <td>{{order.AMT6}}</td>
                <td>{{order.AMT7}}</td>
                <td>{{order.USER_NAME}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right;margin-top: 10px;" id="pageDiv"></div>

    <!-- 订单相关信息modal -->
    <div id="orderDetailContent" class="hide">
        <div class="table-responsive">
            <table class="table table-bordered table-hover table-condensed">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>条码</th>
                    <th>名称</th>
                    <th>单位</th>
                    <th>单价</th>
                    <th>订货量</th>
                    <th>订货金额</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for=" (orderProduct, index) in orderProductList">
                    <td>{{index+1}}</td>
                    <td>{{orderProduct.productCode}}</td>
                    <td>{{orderProduct.productName}}</td>
                    <td>{{orderProduct.unit}}</td>
                    <td>{{orderProduct.price}}</td>
                    <td>{{orderProduct.qty}}</td>
                    <td>{{orderProduct.amt}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <form action="${contextPath}/shop/aogListExportExcel" method="post" id="exportExcel" style="display:none">
        <input type="hidden" name="stringMap['cityName']" :value="queryModel.stringMap.cityName">
        <input type="hidden" name="stringMap['quXianName']" :value="queryModel.stringMap.quXianName">
        <input type="hidden" name="stringMap['channelName']" :value="queryModel.stringMap.channelName">
        <input type="hidden" name="stringMap['empName']" :value="queryModel.stringMap.empName">
        <input type="hidden" name="stringMap['name']" :value="queryModel.stringMap.name">
        <input type="hidden" name="stringMap['phone']" :value="queryModel.stringMap.phone">
        <input type="hidden" name="stringMap['line']" :value="queryModel.stringMap.line">
        <input type="hidden" name="stringMap['payType']" :value="queryModel.stringMap.payType">
        <input type="hidden" name="stringMap['beginOperatorTime']" :value="queryModel.stringMap.beginOperatorTime">
        <input type="hidden" name="stringMap['endOperatorTime']" :value="queryModel.stringMap.endOperatorTime">
    </form>
</div>


<!-- 地图 -->
<%--<div style="margin: 0px 15px 0px 15px">
    <div style="width: 100%;height: 500px;"  id="userLocationMap"></div>
</div>--%>
<div id="mapContainer" class="hide">
    <div style="width: 900px;height: 558px" id="userLocationMap"></div>
</div>

</body>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ec3688cc2547017ad39dd55153d18b85"></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    //地图相关

    var map = new AMap.Map('userLocationMap',{
       // resizeEnable: true,
        zoom: 13,
        //center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)
    });

    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function() {
        toolBar = new AMap.ToolBar();  //工具条
        scale = new AMap.Scale();    //比例尺
        map.addControl(toolBar);
        map.addControl(scale);
    });

    var infoWindow = new AMap.InfoWindow();


    var app = new Vue({
        el: '#app',
        data: {
            orderList : [],
            orderProductList : [],
            queryModel: {
                stringMap: {
                    page: 1,
                    cityName : '',
                    quXianName : '',
                    channelName : '',
                    empName : '',
                    name : '',
                    phone : '',
                    line : '',
                    payType : '',
                    beginOperatorTime : '',
                    endOperatorTime : '',
                    driverName:"",
                    isSel: '1',
                },

            },
            markerList : [],
            queryTotalPrice : '',
            selectTotale : {},
        },
        methods: {
            getOrder: function (page,isSel) {
                layer.load(1);
                app.queryModel.stringMap.page = page;
                app.queryModel.stringMap.isSel = isSel;
                this.disposeQP();
                $.ajax({
                    url: '${contextPath}/shop/getAogStatisticsListByPageQuery',
                    type: 'post',
                    data: app.queryModel,
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        //console.log(data)
                        var dataArray = data.recordList;
                        if (dataArray.length == 0) {
                            layer.msg("查询没有数据")
                        }else {
                            if (isSel == '1') {
                                app.selectTotale = dataArray[dataArray.length-1];
                            }else {
                                dataArray.push(app.selectTotale)
                            }
                        }

                        app.orderList = dataArray;
                        laypage({
                            cont: 'pageDiv'
                            , pages: data.pageCount //总页数
                            , groups: 5 //连续显示分页数
                            , curr: data.currentPage
                            , skin: '#1E9FFF',
                            jump: function (obj, first) {
                                var curr = obj.curr;
                                if (!first) {
                                    app.getOrder(curr,'0')
                                }
                            }
                        });
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        //console.log(error)
                    }
                })
            },
            disposeQP : function () {
                //var cityName = $("#cityNameInput").val();
               // var quXianName = $("#quXianNameInput").val();
               // var channelName = $("#channelNameInput").val();
               // var empName = $("#empNameInput").val();
                var line = $("#lineInput").val();
                var driverName = $("#driverNameInput").val();

                //this.queryModel.stringMap.cityName = cityName;
               // this.queryModel.stringMap.quXianName = quXianName;
                //this.queryModel.stringMap.channelName = channelName;
                //this.queryModel.stringMap.empName = empName;
                this.queryModel.stringMap.line = line;
                this.queryModel.stringMap.driverName= driverName;
            },
            showMap : function (userId,userName,operatorDay,lng,lat) {
                var vm = this;
              /*  for (var indx in vm.markerList) {
                    vm.markerList[indx].setMap();
                }*/
                map.remove(vm.markerList);
                map.clearInfoWindow();
                vm.markerList = [];
                //查询店铺信息
                layer.load(1)
                $.ajax({
                    url: '${contextPath}/shop/getUserLocation',
                    type: 'post',
                    data: {
                        stringMap : {
                            userId:userId,
                            operatorDay : operatorDay,
                        }
                    },
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        //console.log(data)
                        var markerInfos = data.data;
                      /*  markerInfos = [
                            {
                                LONGITUDE:116.384828,
                                LATITUDE:39.91526
                            },{
                                LONGITUDE:116.358828,
                                LATITUDE:39.90955
                            },
                            {
                                LONGITUDE:116.376028,
                                LATITUDE:39.92968
                            },
                            {
                                LONGITUDE:116.360428,
                                LATITUDE:39.93023
                            }
                        ];*/
                        if (markerInfos.length==0) {
                            layer.msg("位置信息异常");
                            return
                        }
                        map.setCenter(new AMap.LngLat(lng,lat));

                        var lineArr = [];
                        var times = 1;
                        for (var index in markerInfos) {
                            var markeInfo = markerInfos[index];

                            if(markeInfo.CO_NUM) {
                                var icon = null;
                                if (markeInfo.IMAGE && false) {
                                    icon = new AMap.Icon({
                                        image : 'http://clouderp.skystorechain.com:20081/'+markeInfo.IMAGE,//24px*24px
                                        //icon可缺省，缺省时为默认的蓝色水滴图标，
                                        size : new AMap.Size(80,80)
                                    });
                                }


                                var div = document.createElement('div');
                                div.className = 'circle';
                                //div.style.width='25px';
                                div.style.textAlign='center';
                                div.style.backgroundColor = 'rgb(200,100,255)';
                                div.innerHTML = ''+ times + '';
                                times++;

                                var marker = new AMap.Marker({
                                    //icon : icon,//24px*24px
                                    content: div,
                                    position : [markeInfo.LONGITUDE,markeInfo.LATITUDE],
                                    title:markeInfo.TIME,
                                    offset : new AMap.Pixel(0,0),
                                    map : map
                                });

                                marker.content= '<br>' + '订单：'+ markeInfo.CO_NUM + '<br>' + '金额：' + markeInfo.ORD_AMT_SUM + '<br>' + '方式：' + vm.disposePayType(markeInfo.PAY_TYPE) + '<br>' + '时间：' + markeInfo.TIME;

                                //鼠标点击marker弹出自定义的信息窗体
                                AMap.event.addListener(marker, 'click', function(e) {
                                    infoWindow.setContent(e.target.content);
                                    infoWindow.open(map, e.target.getPosition());
                                });

                                vm.markerList.push(marker);

                            }
                            if (index == markerInfos.length-1) {
                                var marker = new AMap.Marker({
                                    //icon : icon,//24px*24px
                                    position : [markeInfo.LONGITUDE,markeInfo.LATITUDE],
                                    title:'配送员最后位置',
                                    //offset : new AMap.Pixel(-12,-12),
                                    map : map
                                });

                                marker.content= '配送员最后位置：'+ markeInfo.TIME;

                                //鼠标点击marker弹出自定义的信息窗体
                                AMap.event.addListener(marker, 'click', function(e) {
                                    infoWindow.setContent(e.target.content);
                                    infoWindow.open(map, e.target.getPosition());
                                });

                                vm.markerList.push(marker);
                            }

                            var lngX = markerInfos[index].LONGITUDE;
                            var latY = markerInfos[index].LATITUDE;
                            lineArr.push(new AMap.LngLat(lngX,latY));
                        }

                        var polyline = null;

                        if(lineArr.length >1) {
                            //绘制轨迹
                             polyline = new AMap.Polyline({
                                map:map,
                                path:lineArr,
                                strokeColor:"#00A",//线颜色
                                strokeOpacity:1,//线透明度
                                strokeWeight:3,//线宽
                                strokeStyle:"solid",//线样式
                            });
                        }


                        var $map = $("#mapContainer");
                        $map.removeClass('hide');
                        layer.open({
                            type: 1,
                            title: '配送员 '+ (userName ? userName : '（未命名用户）') + ' ' + operatorDay + ' 轨迹',
                            closeBtn: 1,
                            area: ['900px', '600px'],
                            skin: 'yourclass',
                            content: $map,
                            end: function () {
                                $map.addClass("hide");
                                if (polyline) map.remove(polyline);
                            }
                        });
                    },
                    error: function (error) {
                        layer.closeAll('loading')
                        layer.msg('网络错误');
                        //console.log(error)
                    }
                })


            },
            disposePayType : function (payType) {
                switch (payType) {
                    case '1' :
                        return '线上支付';
                        break;
                    case '2' :
                        return 'pos支付';
                        break;
                    case '3' :
                        return '现金支付';
                        break;
                    case '':
                        return '';
                        break;
                    default :
                        return '未知'

                }
            },
            showOrderProductDetail: function (custCode,orderId) {
                if (!orderId || !custCode) {
                    layer.msg('到货确认数据异常，联系管理员');
                    return
                }
                var vm = this
                layer.load(1)
                $.ajax({
                    url:  '${contextPath}/supermarket/httpPost',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        url: "http://app1:23912/clouderp-cgt-order-rest/api/cgt/order/getOrderItem",
                        stringMap: {
                            custCode: custCode,
                            coNum : orderId,
                        }
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.code != '000') {
                            layer.msg(data.msg);
                            return
                        }
                        if (window.console) console.log(data);
                        if (data.data.length<1) {
                            layer.msg('没有商品信息')
                            return;
                        }
                        vm.orderProductList = data.data;
                        $("#orderDetailContent").removeClass("hide")
                        layer.open({
                            type: 1,
                            title: '订单商品详情',
                            closeBtn: 1,
                            shadeClose: true,
                            maxmin: true,
                            area: ['1100px', '600px'],
                            skin: 'yourclass',
                            content: $("#orderDetailContent"),
                            end: function () {
                                $("#orderDetailContent").addClass("hide")
                            }
                        });

                    }
                    ,
                    error: function (error) {
                        layer.closeAll('loading')
                        layer.msg('网络错误')
                    }
                });
            },
            exportExcel : function () {
                this.disposeQP();
                $("#exportExcel").submit();
            }
        }
    });

    $('#beginOperatorTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        //startDate:new Date(),
    });

    var now = new Date();
    var defaultTime = now.getFullYear() + '-'
    var month = now.getMonth() + 1
    if (month < 10) {
        month = '0' + month
    }
    var nDay = now.getDate();
    if (nDay < 10) {
        nDay = '0' + nDay
    }

    defaultTime = defaultTime + month + '-' + nDay

    $("#beginOperatorTimeInput").val(defaultTime)
    app.queryModel.stringMap.beginOperatorTime = defaultTime

    app.getOrder(1,'1');

    $('#endOperatorTimeInput').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        minView: 2,
        showMeridian: 1,
        format: "yyyy-mm-dd",
        //startDate:new Date(),
    });

    $("#beginOperatorTimeInput").on("change",function () {
        app.queryModel.stringMap.beginOperatorTime = this.value
    });

    $("#endOperatorTimeInput").on("change",function () {
        app.queryModel.stringMap.endOperatorTime = this.value
    });

    var cityNode = null, quXianNode  = null, channelNode  = null, empNode  = null, custNode  = null, shopNode = null;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>

    organization_tree('${contextPath}',cityNode, quXianNode, channelNode, empNode, custNode, shopNode);

    var selectDeliveryLineToSelected = function () {
        $.ajax({
            url: '${contextPath}/shop/selectDeliveryLineToSelected',
            success: function (data) {
                if (data.success) {
                    var countries = data.data
                    $('#lineInput').autocomplete({
                        lookup: countries,
                        onSelect: function (suggestion) {
                            //console.log('You selected: ' + suggestion.value + ', ' + suggestion.data);
                        },
                        //width: 200,
                        minChars: 0,
                    });
                }
            }
        })
    };
    selectDeliveryLineToSelected();
</script>
</html>

